<template>
  <div>
    <el-input
      placeholder="点击按钮开窗选择"
      ref="mod"
      :disabled="true"
      v-model="textField"
      class="input-with-select"
    >
      <el-button slot="append" @click="pickerVisible = true" icon="el-icon-search"></el-button>
    </el-input>
    <el-dialog :visible.sync="pickerVisible" :append-to-body="true" :modal="false">
      <ModulePicker
        :multiple="false"
        :autoset="true"
        :init="selected"
        @confirm="updateCell"
        @ignore="pickerVisible=false"
      />
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue'
import ModulePicker from '@/components/DataPicker/ModulePicker.vue'
export default {
  components: { ModulePicker },

  data() {
    return {
      textField: '',
      valueField: 0,
      cancelBeforeStart: true,
      pickerVisible: false,
      selected: []
    }
  },
  methods: {
    getValue() {
      return this.valueField
    },
    isCancelBeforeStart() {
      return this.cancelBeforeStart
    },
    updateCell(params) {
      this.valueField = params[0].AutoId
      this.textField = params[0].Name
      this.pickerVisible = false
    }
  },
  created() {
    this.valueField = this.params.value
    this.selected.push(this.valueField)
    const modules = this.$store.getters.modules
    for (let i = 0; i < modules.length; i++) {
      if (modules[i].AutoId === this.params.value) {
        this.textField = modules[i].Name
        break
      }
    }
    if (this.textField === '') {
      this.textField = '未知'
    }
    this.cancelBeforeStart = false
  },
  mounted() {
    Vue.nextTick(() => {
      this.$refs.mod.focus()
      this.pickerVisible = true
    })
  }
}
</script>
